<template>
  <!-- html解构 -->
  <div>
    <h2>这是跟组件</h2>
     <!-- 插值表达式，也叫大胡子，小胡子语法 -->
     <!-- 放在标签内或者标签外，不能当作属性使用 -->
     <!-- <input type="{{uname}}"> -->
    <p>姓名：{{ uname.toUpperCase()  + '你好'}}</p>
    <p>年龄：{{age}}</p>
    <p>{{flag? '11111' : '222222'}}</p>
    <!-- 标签的v-html 属性，相当于innerHTML 的意思 会覆盖原因内容，会解析标签-->
    <p v-html="info">简介</p>
    <!-- 标签的v-text 属性，相当于 innerText的意思  会覆盖原因内容，不会解析标签 -->
    <p v-text="uname"></p>
  </div>
</template>
<script>
//JavaScript

export default {
  //对象里面可以写很多东西：比如 data.methods.computed.watch....
  //data 用于存储数据：写法上要求data定义函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
  data () {
    return{
      //页面中用到的数据，都放到这里
      uname:'lisi',
      age:30,
      flag:true,
      info:'这是一个非常<strong>优秀</strong>的boy'
    }
  }
}
</script>
<style>
/* css 样式*/
</style>
